<template>
  <view
    class="online-filter-box"
    style="display: flex; align-items: center; width: 100%; min-height: 70rpx"
    :justify="supportSort ? 'space-between' : 'end'"
  >
    <view style="flex:1">
      <view v-show="supportSort" class="sort-box">
        <u-row type="flex" justify="start" align="middle">
          <view
            class="sort-item"
            v-for="sortItem in sortList"
            :key="sortItem.fieldName"
            @click="onSortChange(sortItem)"
          >
            <text class="sort-txt" :class="{ sortActive: sortInfoActive === sortItem.fieldName }">
              {{ sortItem.showName }}
            </text>
            <view :class="['mobile-font' , sortItem.asc ? 'icon-asc' : 'icon-desc']"
              style="color:#707070; font-size:14px; display: inline-block;"
            />
          </view>
        </u-row>
      </view>
    </view>
    <slot name="right"></slot>
    <view style="display: flex; align-items: center; justify-content: flex-end; flex-direction: row; width: 120rpx">
      <view  class="divider"/>
      <text style="font-size:14px;" v-if="hasFilter" @click="showFilter = !showFilter">
        筛选<i class="mobile-font icon-filter" style="font-size: 14px; margin-left: 1px; display: inline-block"/>
      </text>
    </view>


    <!-- 过滤弹窗 -->
    <u-popup v-if="hasFilter" class="filter-box" v-model="showFilter" mode="bottom" round get-container="body" closeable
             height="80%">
      <view
          style="padding: 16px 24px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box;">

        <view style="margin-bottom: 12px;">
          <view style="width: 100%; text-align: center; font-size: 14px; color: #333333;">筛选</view>
        </view>

        <!-- 过滤组件 -->
        <view style="flex-grow: 1; width: 100%;">
          <slot/>
        </view>

        <view class="menu-box" style="padding: 0px">
          <u-button @click="onReset()" :custom-style="customStyle">重置</u-button>
          <u-button :custom-style="{width: '100%'}" style="flex-grow: 1; margin-left: 8px" type="primary" @click="onRefresh()">确定</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  name: 'filterBox',
  props: {
    hasFilter: {
      type: Boolean,
      default: true
    },
    sortList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showFilter: false,
      sortInfoActive: undefined,
      customStyle: {
        borderRadius: '0',
        border: '1px solid #ebedf0'
      },
      customStyle1: {
        borderRadius: '0',
      }
    }
  },
  methods: {
    onRefresh() {
      this.$emit('refresh');
      this.showFilter = false;
    },
    onReset() {
      this.$emit('reset');
      this.showFilter = false;
    },
    onSortChange(sortInfo) {
      if (sortInfo.asc == null) {
        sortInfo.asc = true;
      } else if (sortInfo.asc === true) {
        sortInfo.asc = false;
      } else if (sortInfo.asc === false) {
        sortInfo.asc = true;
      }
      if (sortInfo.asc != null) {
        this.sortInfoActive = sortInfo.fieldName
      }
      this.$emit('sort-change', sortInfo);
    }
  },
  computed: {
    supportSort() {
      return Array.isArray(this.sortList) && this.sortList.length > 0;
    }
  },
  mounted() {
    console.log(this.sortList);
  }
};
</script>

<style scoped lang="scss">
	.online-filter-box {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
    background: white;
    padding: 0rpx 36rpx;

		&.end {
			justify-content: flex-end;
		}

		.sort-box {
			flex-grow: 1;
			flex-shrink: 1;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			overflow-x: auto;
			overflow-y: hidden;
			white-space: nowrap
		}

		.divider {
			width: 2rpx;
			height: 36rpx;
			background: #E8E8E8;
			margin: auto 16rpx;
		}
	}

	.pop-con {
		padding: 32rpx 48rpx;
		display: flex;
		flex-direction: column;
		height: 100%;
		box-sizing: border-box;

		.top {
			margin-bottom: 24rpx;
			text-align: center;

			text {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.main {
			flex-grow: 1;
			height: 200rpx;
		}

		.bottom {
			button::after {
				border-radius: 0 !important;
				border: none;
			}

			&>u-button,
			&>.u-btn{
				&:first-child {
					width: 208rpx;
				}

				&:last-child {
					flex: 1;
					margin-left: 16rpx;
				}
			}
		}
	}

  .sort-item {
    display: inline;
  }
  .sort-item + .sort-item {
    margin-left: 16rpx;
  }
</style>
